import React from 'react';
import { Button, List, Avatar, PageHeader, Tag, Badge } from 'antd';
import { fetchBundleList } from '../../api/bundle';
import eventBus from '../../model/event';
import MyUpload from '../dashboard/upload';
import * as qs from 'qs';
import { timeFormat } from '../../utils/time';
import { fileSize } from '../../utils/file';
import fileSvg from '../../assets/images/file.svg';
import './index.css';

export default class BundleList extends React.Component {
    state = {
        initLoading: true,
        loading: false,
        data: [],
        list: [],
        title: 'Bundle',
        params: {
            projectId: undefined
        }
    };

    componentDidMount() {
        const index = window.location.href.lastIndexOf('?');
        if (index >= 0) {
            const queryStr = window.location.href.slice(index + 1);

            const query = qs.parse(queryStr);
            this.setState({
                title: query.name,
                params: {
                    projectId: query.id
                }
            }, () => {
                this.fetchData();
            });
        } else {
            this.fetchData();
        }

        eventBus.on('bundle_refresh', () => this.fetchData());
    }

    fetchData() {
        this.getData((res: { data: { data: any[] }; }) => {
            this.setState({
                initLoading: false,
                data: res.data.data || [],
                list: res.data.data || [],
            });
        });
    }

    getData = async (callback: Function) => {
        // console.log(this.state.params)
        const response = await fetchBundleList(this.state.params);
        callback(response);
    }

    onLoadMore = () => { };

    download = (url: string) => {
        window.open(url);
    }

    delete = (id: number) => {
        console.log(id);
    }

    render() {
        const { initLoading, loading, list } = this.state;
        const loadMore = null;

        return (
            <div>
                <div style={{ marginTop: '20px' }}>
                    <PageHeader
                        ghost={false}
                        title={this.state.title}
                        subTitle="bundle总数: 1024  总大小: 10M"
                        extra={[
                            <MyUpload key="upload" projectId={this.state.params.projectId} />,
                        ]}
                    >
                    </PageHeader>
                </div>
                <div className="site-layout-background" style={{ padding: 24, minHeight: 380 }}>
                    <List
                        className="loadmore-list"
                        loading={initLoading}
                        itemLayout="horizontal"
                        loadMore={loadMore}
                        dataSource={list}
                        renderItem={(item: any) => (
                            <List.Item
                                key={item.id}
                                actions={[<a key="list-loadmore-download" onClick={() => this.download(item.path)}>download</a>,
                                <a key="list-loadmore-delete" className="list-loadmore-delete" onClick={() => this.delete(item.id)}>delete</a>]}
                            >
                                <List.Item.Meta
                                    avatar={
                                        <Avatar src={fileSvg} />
                                    }
                                    title={<div><span style={{ marginRight: '40px' }}>{item.name}</span><span>{timeFormat(item.ctime)}</span></div>}
                                    description={
                                        <div>
                                            <Tag color="#108ee9" style={{ marginRight: '40px' }}>{item.tag}</Tag>
                                            <Badge style={{ marginRight: '40px' }} count={fileSize(item.size)} />
                                            <Button type="link" className="copy-item">{item.path}</Button>
                                        </div>
                                    }
                                />
                                <div>上传者: admin</div>
                            </List.Item>
                        )}
                    />
                </div>
            </div>
        );
    }
}

